const app = getApp(); // 获取全局应用实例
const baseURL = app.globalData.baseURL

Page({
  data:{
    baseURL:baseURL,
    videoUrl: '', // 视频链接
    imageUrls: [], // 图片链接列表
    price: 50, // 售价
    originalPrice: 100, // 原价
    discount: 0, // 优惠信息
    sales: 1000, // 销量
    productTitle: '商品标题', // 商品标题
    details: [], // 商品详情
    showDetails: true, // 是否展开详情
    reviews: [], // 评价,暂未启用
    itemTypes: [], // 用于存储 item 的类型
    autoplay: true, // 控制 swiper 是否自动轮播
    currentIndex: 0, // 当前 swiper-item 的索引
    description: '', // 商品描述
    desVideoUrl: '', // 商品描述里的视频
    // 以下加入购物车功能原始数据
    productId: null,     // 商品ID
    cartCount: 0,       // 初始数量为0
    skuMain: {},         // sku头部信息,做为传给组件用
    cartBuy : {},     // 判断是购物车,还是立即购买
    // skuMainImage: '',     // 左上角sku要显示的图片
    // specDimensions: [],   // 动态规格维度
    // dimensions: [],      // 规格维度（如款式、克重）
    productSkus: [], // 初始空数组
    // currentSku: {},   // 库存为0时
  },

  onVideoPlay() {
    // 视频播放时，暂停 swiper 的自动轮播
    this.setData({ autoplay: false });
  },

  onVideoPause() {
    // 视频暂停时，恢复 swiper 的自动轮播
    this.setData({ autoplay: true });
  },

  onVideoEnded() {
    // 视频播放结束后，手动切换到下一个 swiper-item
    this.setData({ autoplay: true });
  },

  onSwiperChange(event) {
    const currentIndex = event.detail.current; // 获取当前 swiper-item 的索引
    const previousIndex = this.data.currentIndex; // 获取上一个 swiper-item 的索引
    if (this.data.itemTypes[previousIndex] === true) {
      const previousVideoContext = wx.createVideoContext(`video${previousIndex}`, this);
      previousVideoContext.pause();
    }  
    // 更新当前索引
    this.setData({ currentIndex });
  },

// 从点击商品传来的商品详情
onLoad(options) {
    // 从全局状态获取购物车数量（假设你已存储到 globalData）
    this.setData({ cartCount: app.globalData.cartCount || 0 })
    const productId = options.id
    this.setData({ productId })
    this.loadProductDetail(productId)
  },
    
  // 返回上一页
  goBack() {
    try{wx.navigateBack()}
    catch (error) {console.error('可能上页有媒体被中断:', error)}
  },

  // 切换详情展开/收起
  toggleDetails() {
    this.setData({showDetails: !this.data.showDetails,});
  },

  // 查看购物车
  viewCart() {
    wx.switchTab({ url: '/pages/cart/cart' });
  },

  // 加入购物车
  onShowSkuDrawer() {
    app.checkLogin().then(loggedIn => {
      if (loggedIn) {
        this.setData({cartBuy: {value:'cart'}})
        const skuChild = this.selectComponent('#skuSelector'); // 获取子组件实例 
        skuChild.show(); // 调用子组件方法显示弹窗
      }
    })
  },

  // 立即购买
  buyNow() {
    app.checkLogin().then(loggedIn => {
      if (loggedIn) { 
        this.setData({cartBuy: {value:'buy'}})
        const skuChild = this.selectComponent('#skuSelector'); // 获取子组件实例 
        skuChild.show(); // 调用子组件方法显示弹窗
      }
    })
  },

  
  // 从接口加载商品详情
  loadProductDetail(productId) {
    wx.showLoading({ title: '加载中...' })
    wx.request({
      url: `${baseURL}api/products/${productId}/`,
      success: (res) => {
        const product = res.data
        // 1. 将details对象数组转换为键值对数组(商品详情,展开和收起那里用的)
        let details_a = product.details.map(obj => {
          let key = Object.keys(obj)[0]; // 获取对象的第一个键
          return [[key, obj[key]]];  // 返回包含单个键值对的数组
        });
        // 2. 按每两个元素分组
        let details = [];
        for (let i = 0; i < details_a.length; i += 2) {
          let group = details_a.slice(i, i + 2); // 取出每两个元素
          details.push(group);
        }
        
        // 如果主图有图片,则用主图的,否则用sku的图片
        const validSkuImages = (product.main_images || product.skus)
        .map(sku => sku.image)
        .filter(img => img?.trim());
      
        // 组合成最终数组（确保givenUrl非空时加入）
        const combinedUrls = [
          ...(product.video_url ? [product.video_url] : []),    // 把视频也加进来
          ...(product.thumbnail ? [product.thumbnail] : []),  // 如果product.thumbnail有效则加入
          ...validSkuImages
        ];
        // 把售价分成小数点前后两部分,显示小数要小字体
        const [integerPart, decimalPart] = product.price.toString().split('.');
        // 提取商品描述里的视频地址
        const desVideoUrl = this.extractVideoUrl(res.data.description)
         
        this.setData({
              // videoUrl: product.video_url, // 视频链接
              imageUrls: combinedUrls, // 图片和视频列表,用的缩略图,也可用主图main_image
              // skuMainImage: product.main_image,  // sku左上角要显示的图片
              skuMain: {skuMainImage: product.main_image, 
                        productTitle: product.name,
                        integerPart, 
                        decimalPart,
                      }, // 做为传给组件用
              price: product.price,  // 售价
              originalPrice: product.original_price, // 原价
              // discount: product.discount, // 优惠信息
              sales: product.sales_total, // 销量
              productTitle: product.name, // 商品标题
              details: details,  // 商品详情
              productSkus: product.skus,
              integerPart, 
              decimalPart,
              description: this.safeFilter(product.description),  // 商品描述
              desVideoUrl: desVideoUrl, // 商品描述里的视频
            });
            // 判断是否是视频的逻辑
            const originalArray = this.data.imageUrls.map(item => item.split('.').pop())
            const targetArray = ["mp4", "avi", "wnv", "mov"];
            const itemTypes = originalArray.map(item => {
              const lowerCaseItem = item.toLowerCase(); // 转换为小写
              return targetArray.includes(lowerCaseItem) ? true : false; // 判断并替换
            });
            this.setData({ itemTypes });
      },
      complete: () => wx.hideLoading()
    })
  },

    // 提取商品描述里的视频地址
    extractVideoUrl(html) {
      // const regex = /<video.*?src="(.*?)"/i
      // const match = html.match(regex)
      // return match ? match[1] : ''
      return ''  // 暂时不使用视频
    },
  
  // 安全过滤
  safeFilter(html) {
    return html
      .replace(/<script/gi, '&lt;script')
      .replace(/<\/script/gi, '&lt;/script')
  },

  // 图片预览
  imgPreview(e) {
    wx.previewImage({
      current: e.detail.src,
      urls: this.getAllImages()
    })
  },

  getAllImages() {
    const imgs = []
    const regex = /<img.*?src="(.*?)"/gi
    let match
    while ((match = regex.exec(this.data.rawDesc)) !== null) {
      imgs.push(match[1])
    }
    return imgs
  },



});
